<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的课表</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../js/layui/css/layui.css">
    <link rel="stylesheet" href="../css/iconfont/iconfont.css">
    <link rel="stylesheet" href="../css/schedules_conn.css">
    <link rel="stylesheet" href="../css/skin/jedate.css">
    <style>
        .calendar {
            /* display: flex;
            flex-wrap: wrap; */
            border: 1px solid #02a1cb;
            width: 800px;
            clear: both;
            margin:0 auto;
        }
        .day{
            background: #f5f5f5;
            border-bottom: 1px solid #ddd;
        }
        .calendar-head{
            background: #02a1cb;
            color: #fff;
            height: 35px;
            line-height: 35px;
        }
        .calendar-head>div{
            width: 50%;
            text-align: center;
            padding:0 10px;
        }
        .calendar-head p{
            display: inline-block;
        }
        .calendar-head span{
            cursor: pointer;
        }
        .calendar-item {
            width: 114px;
            float: left;
            text-align: center;
            height: 35px;
            line-height: 35px;
            font-size: 16px;
            cursor: pointer;
            /*font-weight: bold;*/
            /*color: #999;*/
        }
        .calendar-item.active{
            background: #02a1cb;
            color: #fff;
            border-radius: 50%;
        }
        .calendar-item.prev, .calendar-item.next{
            color: #02a1cb;
        }
        </style>
</head>
<body>
<header class="clearfix">
    <div class="container clearfix">
        <div class="logo fl">
            <a href="#"><img src="../images/logo.png" alt=""></a>
        </div>
        <div class="nav-select fl">
            <div class="select-input ">首页</div>
            <span class="line hide"></span>
            <ul class="hide">
                <li><a href="##">首页</a></li>
                <li><a href="##">首页</a></li>
                <li><a href="##">首页</a></li>
                <li><a href="##">首页</a></li>
                <li><a href="##">首页</a></li>
                <li><a href="##">首页</a></li>
            </ul>
        </div>
        <div class="fr">
            <div class="search fl">
                <div class="dropdown fl">
                    <select name="" id="">
                        <option value="">课程</option>
                        <option value="">老师</option>
                    </select>
                </div>
                <div class="search-box fl">
                    <input type="text">
                    <i class="iconfont">&#xe641;</i>
                </div>
            </div>
            <div class="fl header-nav">
                <ul>
                    <li><a href="#">个人中心</a></li>
                    <li><a href="#">我的订单</a></li>
                    <li class="active"><a href="#">我的课表</a></li>
                    <li><a href="#">我的收藏</a></li>
                    <li><a href="#"><i class="iconfont">&#xe62e;</i></a></li>
                    <li><a href="#">退出</a></li>
                </ul>
            </div>
        </div>
    </div>
</header>
<div class="center clearfix">
    <div class="center-top clearfix">
        <div class="img-box fl">
            <img src="../images/head_pho.png" alt="">
            <p>13900234555</p>
        </div>
        <div class="center-menu">
            <div class="menu fl">
                <a href="#">我的账号</a>
                <ul>
                    <li><a href="#">基本资料</a></li>
                    <li><a href="#">修改登录密码</a></li>
                </ul>
            </div>
            <div class="menu fl">
                <a href="#">课程管理</a>
                <ul>
                    <li class="active"><a href="#">我的课表</a></li>
                    <li><a href="#">我的课程</a></li>
                </ul>
            </div>
            <div class="menu fl">
                <a href="#">我的积分</a>
                <ul>
                    <li><a href="#">积分充值</a></li>
                    <li><a href="#">我的礼物</a></li>
                </ul>
            </div>
            <div class="menu fl">
                <a href="#">留言反馈</a>
            </div>
        </div>
    </div>
    <div class="center-content">
        <div class="change-box">
            <!--<div class="x_main_center" id="x_main_center" style="min-height: 560px;">-->
                <!--<div style="width: 800px; height: 300px;">-->
                    <!--<input id="schedule" />-->
                    <!--<div class="p-bh" style="margin-top: 310px;">-->
                        <!--<i class="p-bi" style="margin-top: 10px; float: left; margin-right: 10px; background-color: red;"></i>-->
                        <!--有我要上的课-->
                    <!--</div>-->
                <!--</div>-->
                <!--<div class="AJ" style="width: 800px; min-height: 300px;" id="course_list"></div>-->
            <!--</div>-->

            <div id="calendar" class="calendar clearfix"></div>
        </div>
    </div>
</div>
<div class="introduce">
    <div class="container">
        <div class="top clearfix">
            <div class="logo fl"><a href="#"><img src="../images/logo.png" alt=""></a></div>
            <div class="fl download">
                <img src="../images/erweima.png" alt="">
                <p>客户端下载</p>
            </div>
            <div class="fl download">
                <img src="../images/erweima.png" alt="">
                <p>微信公众号</p>
            </div>
            <div class="fl contact">
                <p><i class="iconfont">&#xe618;</i>020-32146993</p>
                <p><i class="iconfont">&#xe61b;</i>4903 Deangel Row Suite 838</p>
                <p><i class="iconfont">&#xe639;</i>support@company.com</p>
            </div>
        </div>
        <div class="contact-ul clearfix">
            <ul>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">人才招聘</a></li>
                <li><a href="#">服务协议</a></li>
            </ul>
        </div>
        <div class="footline">
            <img src="../images/footer_end.png" alt="">
        </div>
    </div>
</div>
<footer>
    <p>广州市家合教育科技有限公司</p>
    <p>地址：广州市增城大道69号万达广场金街9栋201-204 粤ICP备16098091号</p>
</footer>
</body>
</html>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript" src="../js/conn.js"></script>
<script src="../js/bootstrap.min.js" type="text/javascript"></script>
<script>
    $(function () {
        function renderCalendar (year, month) {
            let thisMonthCount = new Date(year, month, 0).getDate()
            let lastMonthCount = new Date(year, month - 1, 0).getDate()
            let fistWeek = new Date(year, month - 1, 1).getDay()
            // let nowYear = new Date().getFullYear()
            // let nowMonth = new Date().getMonth()+1
            let nowDay = new Date().getDate()
            // if(month<10){
            //     month='0'+month
            // }
            let str = `
            <div class="calendar-head clearfix">
                <div class="year fl">
                    <span class="iconfont fl prevYear">&#xe792;</span>
                    <p>
                        <span id="currentYear" now="`+year+`">`+year+`年</span>
                        <span class="iconfont">&#xe791;</span>
                    </p>
                    <span class="iconfont fr nextYear">&#xe790;</span>
                </div>
                <div class="month fl">
                    <span class="iconfont fl prevMonth">&#xe792;</span>
                     <p>
                        <span id="currentMonth" now="`+month+`">`+month+`月</span>
                        <span class="iconfont">&#xe791;</span>
                    </p>
                    <span class="iconfont fr nextMonth">&#xe790;</span>
                </div>
            </div>
            <div class="day clearfix">
                <div class="calendar-item">日</div>
                <div class="calendar-item">一</div>
                <div class="calendar-item">二</div>
                <div class="calendar-item">三</div>
                <div class="calendar-item">四</div>
                <div class="calendar-item">五</div>
                <div class="calendar-item">六</div>
            </div>
        `
            for (var day = lastMonthCount - fistWeek + 1; day <= lastMonthCount; day++) {
                if(day<10){
                    day='0'+day
                }
                let m = month - 1
                str += `<div class="calendar-item prev date" data-year=${m === 0 ? year - 1 : year} data-month=${m === 0 ? 12 : m} data-day=${day}>${day}</div>`
            }
            for (var day = 1; day <= thisMonthCount; day++) {
                if(day<10){
                    day='0'+day
                }
                str += `<div class="calendar-item date" data-year=${year} data-month=${month} data-day=${day}>${day}</div>`
            }
            for (var day = 1; day <= 42 - thisMonthCount - fistWeek; day++) {
                let m = month + 1
                if(day<10){
                    day='0'+day
                }
                str += `<div class="calendar-item next date" data-year=${m === 13 ? year + 1 : year} data-month=${m === 13 ? 1 : m} data-day=${day}>${day}</div>`
            }
            $('#calendar').html(str)
            $('.calendar-item').each(function () {
               let nowyear = new Date().getFullYear()
                let nowmonth = new Date().getMonth()+1
              if($(this).attr('data-day')==nowDay&&nowyear==$(this).attr('data-year')&&nowmonth==$(this).attr('data-month')){
                  $(this).addClass('active').siblings().removeClass('active')
              }
            })
        }
        renderCalendar(new Date().getFullYear(), new Date().getMonth()+1)

        $('.date').on('click',function () {
          $(this).addClass('active').siblings().removeClass('active')
            if($(this).attr('data-month')!=$('#currentMonth').attr('now')){
                renderCalendar($(this).attr('data-year'), $(this).attr('data-month'))
            }
        })


        //去年
        $('.prevYear').on('click',function () {
           let year = $('#currentYear').attr('now')-1
            let month = $('#currentMonth').attr('now')
            renderCalendar(year, month)
        })
        //明年
        $('.nextYear').on('click',function () {
            let year =parseInt( $('#currentYear').attr('now'))+1
            let month = $('#currentMonth').attr('now')
            renderCalendar(year, month)
        })
    })
</script>